<template>
    <div class="page-container">
        <a-form-model :model="form" style="margin: 50px 0 0 50px; width: 50vw;" layout="vertical">
            <a-form-model-item label="博客标题">
                <a-input v-model="form.blogTitle" :maxLength="30">
                    <span slot="suffix" :style="{color: form.blogTitle.length >= 30 ? 'red' : 'gray'}">{{ 30 - form.blogTitle.length }} / 30</span>
                </a-input>
            </a-form-model-item>
            <a-form-model-item label="博客副标题">
                <a-input v-model="form.blogSubTitle" :maxLength="70">
                    <span slot="suffix" :style="{color: form.blogSubTitle.length >= 70 ? 'red' : 'gray'}">{{ 70 - form.blogSubTitle.length }} / 70</span>
                </a-input>
            </a-form-model-item>
            <a-form-model-item label="网站logo">
                <a-upload
                    name="avatar"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    @change="handleLogoChange"
                    :customRequest="() => {}"
                >
                    <img v-if="form.logo" :src="`/source/${form.logo}`" alt="网站 logo" width="200" height="200" />
                    <div v-else>
                        <a-icon :type="form.uploadLogo.loading ? 'loading' : 'plus'" />
                        <div class="ant-upload-text">
                            上传
                        </div>
                    </div>
                </a-upload>
            </a-form-model-item>

            <a-form-model-item label="博客目录是否分页">
                <a-switch v-model="form.blogUsePage" />
            </a-form-model-item>

            <a-form-model-item label="分页每页数量">
                <a-input-number v-if="form.blogUsePage" v-model="form.blogPageLimit" :min="1" :max="50"/>
            </a-form-model-item>

            <a-form-model-item label="博客目录用新标签页或窗口打开博客页">
                <a-switch v-model="form.archiveOpenBlogInNewTab" />
            </a-form-model-item>
            <a-form-model-item label="博客和页面的编辑器(仅能配置一次)">
                <div class="singleSelect">
                    <div class="option" :class="[form.editor === 'mavon' ? 'option-active' : '']" @click="chooseEditor('mavon')">
                        <div class="title">使用 mavonEditor</div>
                        <div class="subTitle">使用 markdown 进行编辑</div>
                    </div>
                    <div class="option" :class="[form.editor === 'wang' ? 'option-active' : '']" @click="chooseEditor('wang')">
                        <div class="title">使用 wangEditor</div>
                        <div class="subTitle">使用类似 Word 的方式进行编辑</div>
                    </div>
                </div>
            </a-form-model-item>
            <a-form-model-item label="使用密码访问博客">
                <a-switch v-model="form.enablePasswordAccess" />
            </a-form-model-item>
            <a-form-model-item label="访问密码" v-show="form.enablePasswordAccess">
                <a-input v-model="form.accessPassword" :maxLength="50"></a-input>
            </a-form-model-item>
            <a-form-model-item>
                <a-button type="primary" size="large" icon="save" @click="saveSetting">保存设置</a-button>
            </a-form-model-item>
        </a-form-model>
    </div>
</template>
<script>
import { getBase64 } from '../../../utils/source'
import { getSourceUrl } from '../../../utils/url'
import { upload } from '../../../api/source'
import { getSetting, setSetting } from '../../../api/setting'

export default {
    name: 'BaseSetting',
    data() {return {
        oriTableData: {
            index: '1',
            type: 'blog',   // blog | page | url
            title: '',
            value: '',
            target: '当前页面打开', // thispage | newpage
            extValue: ''
        },
        form: {
            blogTitle: '',
            blogSubTitle: '',
            blogUsePage: true,
            blogPageLimit: 20,
            logo: '',
            uploadLogo: {
                loading: false
            },
            archiveOpenBlogInNewTab: true,
            editor: '',
            enablePasswordAccess: false,
            accessPassword: ''
        }
    }},

    mounted() {
        this.initSetting()
    },
    methods: {
        chooseEditor(v) {
            if (this.form.editor !== '') {
                this.$message.warning('配置后无法再进行修改')
                return
            }
            this.form.editor = v
        },
        saveSetting() {
            setSetting({setting: [
                {
                    type: 'title',
                    value: this.form.blogTitle
                },
                {
                    type: 'subTitle',
                    value: this.form.blogSubTitle
                },
                {
                    type: 'blogUsePage',
                    value: this.form.blogUsePage
                },
                {
                    type: 'blogPageLimit',
                    value: this.form.blogPageLimit
                },
                {
                    type: 'logo',
                    value: this.form.logo
                },
                {
                    type: 'archiveOpenBlogInNewTab',
                    value: this.form.archiveOpenBlogInNewTab
                },
                {
                    type: 'editor',
                    value: this.form.editor
                },
                {
                    type: 'enablePasswordAccess',
                    value: this.form.enablePasswordAccess
                },{
                    type: 'accessPassword',
                    value: this.form.accessPassword
                }
            ]}).then(res => {
                this.$message.success('保存成功')
            }).catch(e => {
                console.error(e);
                this.$message.error(e.msg || '')
            })
        },
        initSetting() {
            getSetting({
                types: 'title,subTitle,blogUsePage,blogPageLimit,logo,archiveOpenBlogInNewTab,editor,enablePasswordAccess,accessPassword'
            }).then(res => {
                this.form.blogTitle = res.data.find(v => v.type == 'title').value || ''
                this.form.blogSubTitle = res.data.find(v => v.type == 'subTitle').value || ''
                this.form.blogUsePage = res.data.find(v => v.type == 'blogUsePage').value === "1"
                this.form.blogPageLimit = res.data.find(v => v.type == 'blogPageLimit').value
                this.form.logo = res.data.find(v => v.type == 'logo').value || '',
                this.form.archiveOpenBlogInNewTab = res.data.find(v => v.type == 'archiveOpenBlogInNewTab').value === "1"
                this.form.editor = res.data.find(v => v.type == 'editor').value || ''
                this.form.enablePasswordAccess = res.data.find(v => v.type == 'enablePasswordAccess').value === "1"
                this.form.accessPassword = res.data.find(v => v.type == 'accessPassword') ? res.data.find(v => v.type == 'accessPassword').value || '' : ''
            }).catch(e => {
                console.error(e);
                this.$message.error(e.msg || '暂未配置')
            })
        },
        beforeLogoUpload(file) {
            console.log('logo upload:', file);
            return true
        },
        handleLogoChange(e) {
            if (e.file.status == 'uploading') {
                this.form.uploadLogo.loading = true
                getBase64(e.file.originFileObj, img => {
                    upload({base64: img}).then(res => {
                        this.form.uploadLogo.loading = false
                        this.form.logo = res.data.id
                        this.$message.success('上传成功')
                    }).catch(e => {
                        this.form.uploadLogo.loading = false
                        this.$message.success('上传失败')
                        console.error(e)
                    })
                })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.ant-form-item-control {
    margin-top: 5px;
}
.singleSelect {
    display: flex;
    flex-direction: row;
    .option {
        display: flex;
        flex-direction: column;
        border: solid 1px lightgray;
        border-radius: 4px;
        padding: 5px 10px;
        margin-right: 10px;
        &:hover {
            cursor: pointer;
            border-color: #595959;
        }
    }

    .option-active {
        border-color: #4091F7;
        div {
            color: #4091F7;
        }
    }

    .title {
        font-size: 20px;
        font-weight: 600;
        color: #262626;
    }
    .subTitle {
        font-size: 13px;
        color: #595959;
    }
}
</style>
